<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
<!-- BEGIN HEAD -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta content="" name="description" />
    <meta content="" name="author" />
    <link href="../assets/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <link href="../assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
    <link href="../css/style.css" rel="stylesheet" />
    <link href="../css/style_responsive.css" rel="stylesheet" />
    <link href="../css/style_default.css" rel="stylesheet" id="style_color" />
    <link rel="stylesheet" type="text/css" href="../assets/gritter/css/jquery.gritter.css" />
    <title>用户登录</title>
</head>
<body id="login-body">
<div class="login-header">
    <!-- BEGIN LOGO -->
    <div id="logo" class="center">
        <img src="../img/logo.png" alt="Tencent" class="center" />
    </div>
    <!-- END LOGO -->
</div>
<!-- BEGIN LOGIN -->
<div id="login">
    <!-- BEGIN LOGIN FORM -->
    <!--    <form id="loginform" class="form-vertical no-padding no-margin" action="/Login">-->
    <form id="loginform" class="form-vertical no-padding no-margin" method="post" action="/login">
        <div class="lock">
            <i class="icon-lock"></i>
        </div>
        <div class="control-wrap">
            <h4>用户登录</h4>
            <div class="control-group">
                <div class="controls">
                    <div class="input-prepend">
                        <span class="add-on"><i class="icon-user"></i></span>
                        <input id="input-username" type="text" placeholder="用户名" name="username"/>
                    </div>
                </div>
            </div>
            <div class="control-group">
                <div class="controls">
                    <div class="input-prepend">
                        <span class="add-on"><i class="icon-key"></i></span>
                        <input id="input-password" type="password" placeholder="密码" name="password"/>
                    </div>
                    <div class="input-prepend">
                        <span class="add-on"><i class="icon-tasks"></i></span>
                        <input type="text" placeholder="验证码" name="verifyCode" required="required">
                    </div>
                    <div class="input-prepend">
                        <img src="getVerifyCode" title="看不清，请点我" onclick="refresh(this)" onmouseover="mouseover(this)" />
                    </div>
                    <div class="mtop10">
                        <div class="block-hint pull-left small">
                            <label><input type="checkbox" id="" name="remember-me"> 记住密码</label>
                        </div>
                        <div class="block-hint pull-right">
                            <a href="javascript:;" class="" id="forget-password">忘记密码</a>
                        </div>
                    </div>
                    <div class="clearfix space5"></div>
                </div>
            </div>
        </div>
        <input type="submit" id="login-btn" class="btn btn-block login-btn" value="立即登陆" /><br>
        <!--        <a href="pages/register.html">-->
        <!--            <input type="button" id="register-btn" class="btn btn-block login-btn" value="注册" />-->
        <!--        </a>-->
    </form>
    <!-- END LOGIN FORM -->
    <!-- BEGIN FORGOT PASSWORD FORM -->
    <form id="forgotform" class="form-vertical no-padding no-margin hide" action="index.html">
        <p class="center">请在下面输入您的电子邮件地址以重置您的密码。</p>
        <div class="control-group">
            <div class="controls">
                <div class="input-prepend">
                    <span class="add-on"><i class="icon-envelope"></i></span>
                    <input id="input-email" type="text" placeholder="邮箱"  />
                </div>
            </div>
            <div class="space20"></div>
        </div>
        <input type="button" id="forget-btn" class="btn btn-block login-btn" value="提交" />
    </form>
    <!-- END FORGOT PASSWORD FORM -->
</div>
<!-- END LOGIN -->
<!-- BEGIN COPYRIGHT -->
<div id="login-copyright">
    2019 &copy; 腾讯.智能制造.云平台
</div>
<!-- END COPYRIGHT -->
<!-- BEGIN JAVASCRIPTS -->
<script src="../js/jquery-1.8.3.min.js"></script>
<script src="../assets/bootstrap/js/bootstrap.min.js"></script>
<script src="../js/jquery.blockui.js"></script>
<script src="assets/gritter/js/jquery.gritter.js"></script>
<script src="../js/scripts.js"></script>

<script>

    function refresh(obj) { obj.src = "getVerifyCode?" + Math.random(); }

    function mouseover(obj) { obj.style.cursor = "pointer"; }

    $(function () {
        /**
         * 原始代码，建议勿动
         */
        App.initLogin();

        /**
         * 用户名失焦后验证
         */
        $("#input-username").blur(function () {
            $.ajax({
                url:"/isExistUsername",
                type:"POST",
                data:{
                    username:$("#input-username").val()
                },
                dataType:"json",
                beforeSend:function (XMLHttpRequest) {},
                success:function (data,textStatus,XMLHttpRequest) {
                    if(data){
                        //true 用户名不存在 验证失败
                        $.gritter.add({
                            title: '',
                            text: '用户名验证失败，请稍后再试'
                        });
                    }
                },
                error:function (XMLHttpRequest,textStatus,errorThorwn) {
                    console.error(XMLHttpRequest);
                    console.error(textStatus);
                    console.error(errorThorwn);
                    //验证失败
                    $.gritter.add({
                        title: '',
                        text: '用户名验证失败，请稍后再试'
                    });
                },
                complete:function (XMLHttpRequest,textStatus) {}
            })
        });



        /**
         * 点击登录按键实现登录功能
         */
        $("#login-btn").click(function () {
            // let username = $("#input-username").val(),
            //     password = $("#input-password").val();
            /**
             * 前端验证
             * 若 username password
             * 均非空则发送请求
             * 否则提示用户输入
             */
            //     if(username && password){
            //         $.ajax({
            //             url:"Login",
            //             type:"POST",
            //             data:{
            //                 username:$("#input-username").val(),
            //                 password:$("#input-password").val()
            //             },
            //             dataType:"json",
            //             beforeSend:function (XMLHttpRequest) {},
            //             success:function (data,textStatus,XMLHttpRequest) {
            //                 if(data && data.length != 0){
            //                     //登录成功
            //                     // location.href = "index.html";
            //                 }else {
            //                     //登录失败
            //                     $.gritter.add({
            //                         title: '',
            //                         text: '登录失败，请稍后再试'
            //                     });
            //                 }
            //             },
            //             error:function (XMLHttpRequest,textStatus,errorThorwn) {
            //                 console.error(XMLHttpRequest);
            //                 console.error(textStatus);
            //                 console.error(errorThorwn);
            //                 //登录失败
            //                 $.gritter.add({
            //                     title: '',
            //                     text: '登录失败，请稍后再试'
            //                 });
            //             },
            //             complete:function (XMLHttpRequest,textStatus) {}
            //         })
            //     }else {
            //         if(!username){
            //             $.gritter.add({
            //                 title: '',
            //                 text: '用户名不能为空,请输入用户名'
            //             });
            //         }
            //         if(!password){
            //             $.gritter.add({
            //                 title: '',
            //                 text: '密码不能为空,请输入密码'
            //             });
            //         }
            //     }
        });
    });
</script>
<!-- END JAVASCRIPTS -->
</body>
</html>
